<template>
	<view class="main" :style="allStyle()">
		<view class="top"
			style="height: 44px;display: flex;justify-content: space-between;margin-top: 5px;margin-left: 16px;margin-right: 16px;">
			<view class="leftTop" style="display: flex;">
				<view class="left" :style="getStyle(isTag === 1)" @click="tags(1)">红榜</view>
				<view class="right" :style="getStyle(isTag === 2)" @click="tags(2)">黑榜</view>
			</view>
			<view class="rightTop" style="display: flex;">
				<view class="title" :style="getTitle()">月份：</view>
				<view class="choose" style="height: 30px;margin-top: 4px;" @click="isClick()">
					<u--input v-model="searchTime" suffixIcon="calendar" suffixIconStyle="color: #909399" readonly
						style="width: 80px;"></u--input>
				</view>
				<u-datetime-picker ref="picker" :show="isShow" v-model="tempTime" mode="year-month" @confirm="getYes"
					@close="isClose()" @cancel="isClose()" :closeOnClickOverlay="true"></u-datetime-picker>
			</view>
		</view>
		<scroll-view :style="getHeight()" scroll-y="true">
			<view class="content" ref="content">
				<view class="aaa" v-show="isTag==1 && hongbList.length==0">
					<view class="noSearch">
						<div style="height: 100px;"></div>
						<view class="aaaaa" v-show="!isOka">
							<div style="height: 100px;"></div>
							<u-loading-icon mode="circle" size="50px"></u-loading-icon>
						</view>
						<view class="bbbbb" v-show="isOka">
							<view class="ccccccc" v-show="!notQxa">
								<u-empty mode="search" text="暂无数据"></u-empty>
							</view>
							<view class="ddddddd" v-show="notQxa">
								<u-empty mode="page" text="加载失败"></u-empty>
							</view>
						</view>
					</view>
				</view>
				<view class="red" v-show="isTag==1 && hongbList.length!=0">
					<u-cell-group>
						<u-cell :size="getSize()" :title="item.xmmc" v-for="(item,index) in hongbList"
							:key="index"></u-cell>
					</u-cell-group>
				</view>
				<view class="aaa" v-show="isTag==2 && heibList.length==0">
					<view class="noSearch">
						<div style="height: 100px;"></div>
						<view class="aaaaa" v-show="!isOkb">
							<div style="height: 100px;"></div>
							<u-loading-icon mode="circle" size="50px"></u-loading-icon>
						</view>
						<view class="bbbbb" v-show="isOkb">
							<view class="ccccccc" v-show="!notQxb">
								<u-empty mode="search" text="暂无数据"></u-empty>
							</view>
							<view class="ddddddd" v-show="notQxb">
								<u-empty mode="page" text="加载失败"></u-empty>
							</view>
						</view>
					</view>
				</view>
				<view class="black" v-show="isTag==2 && heibList.length!=0">
					<u-cell-group>
						<view class="temp" v-for="(item,index) in heibList" :key="index">
							<u-cell :size="getSize()" v-show="index==0" :title="item.xmmc">
								<view slot="right-icon" style="display: flex;align-items: center;">
									<view class="a" style="color: #666666;font-size: 14px;">不通过次数:</view>
									<view class="b" style="background-color: #EF2E50;">{{item.num}}</view>
								</view>
							</u-cell>
							<u-cell :size="getSize()" v-show="index==1" :title="item.xmmc">
								<view slot="right-icon" style="display: flex;align-items: center;">
									<view class="a" style="color: #666666;font-size: 14px;">不通过次数:</view>
									<view class="b" style="background-color: #DD8443;">{{item.num}}</view>
								</view>
							</u-cell>
							<u-cell :size="getSize()" v-show="index==2" :title="item.xmmc">
								<view slot="right-icon" style="display: flex;align-items: center;">
									<view class="a" style="color: #666666;font-size: 14px;">不通过次数:</view>
									<view class="b" style="background-color: #F6AC4A;">{{item.num}}</view>
								</view>
							</u-cell>
							<u-cell :size="getSize()" v-show="index==3 || index==4" :title="item.xmmc">
								<view slot="right-icon" style="display: flex;align-items: center;">
									<view class="a" style="color: #666666;font-size: 14px;">不通过次数:</view>
									<view class="b" style="background-color: #FACD91;">{{item.num}}</view>
								</view>
							</u-cell>
							<u-cell :size="getSize()" v-show="index > 4" :title="item.xmmc">
								<view slot="right-icon" style="display: flex;align-items: center;">
									<view class="a" style="color: #666666;font-size: 14px;">不通过次数:</view>
									<view class="b" style="background-color: #878787;">{{item.num}}</view>
								</view>
							</u-cell>
						</view>
					</u-cell-group>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import croods from '@/common/croods-1.3.3.js';
	window.croods = croods;
	window.hydra = require('../../../common/wst_hydra-1.0.0.js');


	import coordtransform from 'coordtransform';
	import {
		getHHBList
	} from '@/common/api.js'
	export default {
		data() {
			return {
				isTag: 1,
				isShow: false,
				searchTime: '',
				tempTime: '',
				backupTime: '',
				search: {
					startTime: '',
					endTime: ''
				},
				hongbList: [],
				heibList: [],
				isOka: false,
				isOkb: false,
				notQxa: false,
				notQxb: false,
			}
		},
		onShow() {
			document.body.style.overflow = 'auto';
			this.isOka = false
			this.isOkb = false
			this.notQxa = false
			this.notQxb = false
		},
		methods: {
			isClick() {
				this.isShow = true
				this.backupTime = this.tempTime
			},
			isClose() {
				this.tempTime = this.backupTime
				this.$refs.picker.innerValue = this.tempTime
				this.isShow = false
			},
			/* 数据 */
			getData() {
				getHHBList(this.search).then(res => {
					/* 清空列表 */
					this.hongbList = []
					this.heibList = []
					if ("msgCode" in res && (res.msgCode == "1003" || res.msgCode == "-401")) {
						this.notQxa = true
						this.notQxb = true
					} else {
						this.hongbList = res.red
						this.heibList = res.black
					}
					this.isOka = true
					this.isOkb = true
				}).catch(err => {
					this.notQxa = true
					this.notQxb = true
					this.isOka = true
					this.isOkb = true
				})
			},
			/* 查询 */
			getYes(e) {
				this.getYearAndMonth(e.value)
				this.isShow = false
			},
			getYearAndMonth(e) {
				let date = e ? new Date(e) : new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				if (month < 10) {
					month = "0" + month
				}
				this.searchTime = year + "-" + month
				this.tempTime = date.getTime()
				let lastDay = new Date(year, month, 0).getDate();
				this.search.startTime = year + "-" + month + "-01 00:00:00"
				this.search.endTime = year + "-" + month + "-" + lastDay + " 23:59:59"
				this.getData()
			},
			/* 页面切换 */
			tags(e) {
				this.isTag = e
				this.$nextTick(() => {
					this.$refs.content.$el.scrollIntoView();
				});
			},
			/* 样式类 */
			allStyle() {
				let height = uni.getSystemInfoSync().windowHeight
				return {
					'height': height,
					'display': 'flex',
					'flex-direction': 'column',
					'background-color': '#FAFAFA'
				}
			},
			getHeight() {
				let a = uni.getSystemInfoSync().windowHeight - 69
				return {
					'height': a + 'px',
					'margin-top': '10px',
					'margin-bottom': '10px'
				}
			},
			getStyle(isTag) {
				let a = uni.getSystemInfoSync().windowWidth
				let style = {
					'font-family': 'PingFangSC-Regular',
					'font-size': '18px',
					'color': '#666666',
					'font-weight': '400',
					'height': '44px',
					'width': '80px',
					'line-height': '44px',
					'text-align': 'center'
				}
				if (a < 370) {
					style['font-size'] = '16px';
					style['width'] = '70px';
				} else {
					style['font-size'] = '18px';
					style['width'] = '80px';
				}
				if (isTag) {
					style['font-family'] = 'PingFangSC-Medium';
					style['color'] = '#323233';
					style['font-weight'] = '500';
					style['border-bottom'] = '3px solid #FF5000';
				}
				return style;
			},
			getTitle() {
				return {
					'font-family': 'PingFangSC-Regular',
					'font-size': '14px',
					'color': '#666666',
					'font-weight': '400',
					'height': '44px',
					'width': '45px',
					'line-height': '44px',
					'text-align': 'center'
				}
			},
			getSize() {
				let a = uni.getSystemInfoSync().windowWidth
				if (a < 370) {
					return
				} else {
					return 'large'
				}
			},
		},
		async mounted() {
			await this.getYearAndMonth()
			this.$refs.picker.innerValue = new Date().getTime()
		}
	}
</script>

<style>
	.b {
		margin-left: 4px;
		width: 26px;
		height: 26px;
		border-radius: 4px;
		text-align: center;
		font-size: 18px;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>